<template>
	<u-tabbar :value="value" @change="change" :border="false" inactiveColor='#000' active-color="#40C6A1" zIndex='9999' :safeAreaInsetBottom="true">
		<u-tabbar-item text="首页" name="0" @click="click">
			<image class="bar_img" slot='active-icon' src="../../static/images/home-h.png"></image>
			<image class="bar_img" slot='inactive-icon' src="../../static/images/home.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="开门" name="1" @click="click">
			<image class="bar_img" slot='active-icon' src="../../static/images/door-open.png"></image>
			<image class="bar_img" slot='inactive-icon' src="../../static/images/opendoor.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的" name="2" @click="click">
			<image class="bar_img" slot='active-icon' src="../../static/images/my-h.png"></image>
			<image class="bar_img" slot='inactive-icon' src="../../static/images/my.png"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			value: {
				type: Number | String,
				default: 0
			}
		},
		onLoad() {

		},
		mounted() {},
		methods: {
			change(index) {
				console.log(index);
			},
			click(index) {
				if (index == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (index == 1) {
					uni.switchTab({
						url: '/pages/openDoor/openDoor'
					})
				} else if (index == 2) {
					uni.switchTab({
						url: '/pages/my/my'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.bar_img{
		width: 64rpx;
		height: 64rpx;
	}
</style>